{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/common.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/home.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/dialog.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="shortcut icon" type="" href="{% static 'images/python_512px_1118083_easyicon.net.png' %}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/semantic.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/vue1.js' %}"></script>
    <script src="{% static 'js\reqwest.js' %}"></script>
    <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/8.5/styles/monokai_sublime.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'wangEditor-2.1.22\dist\css\wangEditor.min.css' %}">
    <script>
        hljs.initHighlightingOnLoad();
    </script>
</head>

<body id="app">
    <!--菜单部分开始-->
    <div class="top nav">
        <div class="ui fixed borderless menu">
            <div class="logo item">
                <a href="{% url 'home' %}">
                    <img src="{% static 'images/logo.png' %}" alt="" class="ui image" />
                </a>
            </div>
            <div class="item">
                <form class="ui icon input" action="">
                    <input class="prompt" placeholder="搜索您感兴趣的内容..." type="text" name="q">
                    <i class="search icon"></i>
                </form>
            </div>
            {% if request.user.is_authenticated %}
            <a class="item">
                <img src="{% static 'images/question_icon.png' %}" alt="" class="ui image" />
                <span class="nav text" onclick="$('.ui.modal').modal('show')">提问</span>
            </a>
            {% else %}
            <a class="item">
                <img src="{% static 'images/question_icon.png' %}" alt="" class="ui image" />
                <span class="nav text" v-on:click="Show()">提问</span>
            </a>
            {% endif %}
            <!--<a class="item" href="{% url 'home' %}">
                <img src="{% static 'images/read_icon.png' %}" alt="" class="ui image" />
                <span class="nav text">阅读</span>
            </a>-->
            <a class="item" href="{% url 'answer' %}">
                <img src="{% static 'images/answer_icon.png' %}" alt="" class="ui image" />
                <span class="nav text">回答</span>
            </a>
            {% if request.user.is_authenticated %}
            <div class="right menu">
                <a class="item" href="">
                    <img style="width: 25px; height: 25px;" src="/static/uploads/{{ request.user.profile.avatar }}" alt="" class="ui image" />
                    <span class="nav text"> {{ request.user.profile.name }}</span>
                </a>
                <a class="item" href="{% url 'logout' %}">
                    <span class="nav text"> 登出</span>
                </a>
            </div>
            {% else %}
            <div class="right menu">
                <a class="item" href="{% url 'Login' %}">
                    <span class="nav text"> 登录</span>
                </a>
                <a class="item" href="{% url 'register' %}">
                    <span class="nav text"> 注册 </span>
                </a>
            </div>
            {% endif %}
        </div>
    </div>
    <!--主体部分！！！频道推荐-->
    <div class="ui vertical segment channel">
        <span style="font-family: SourceHanSansSC;font-weight:bold;">频道</span>
        <div class="ui divider 2" style="color: #cccccc;"></div>
        <div class="row" style="margin-top:13px;margin-bottom:13px;">
            <div class="ui image">
                <img src="{% static 'images/recommand_icon.png' %}" alt="" />
            </div>
            <a class="channel-item" href="#">{{ topic.name }}</a>
        </div>
    </div>
    <!--主体部分！！！内容开始-->
    <div class="Rectangle answer">
        <span style="font-family: SourceHanSansSC;font-weight:bold;">最新动态</span>
        <div class="ui divider 2" style="color: #cccccc;"></div>
        <div class="ui items">
            <!--主体部分！！！第一个信息框-->
            <div class="item" v-for="question in questions">
                <div class="ui small image" style="width:37px;height:37px;">
                    <a href="/profile/<% question.author.id %>">
                    <img  src="<% question.author.avatar %>">
                    </a>
                    <div class="Rectangle-7">
                        <span style="color: #698ebf;font-size:12px;font-weight: bold;padding-left: 8px;">
                                <% question.like_counts %>
                            </span>
                    </div>
                </div>
                <div class="content" style="display:inline-block;">
                    <a class="header" style="font-size:15px;color:#225599;" href="/detail/<%question.question.id%>">
                        <% question.question.title %>
                    </a>
                    <div class="meta">
                        <span style="font-weight:bold;">  <% question.author.name %> </span>
                        <span style="color:grey"> <% question.author.desc %> </span>
                    </div>
                    <div class="description" v-if="question.reverl_all">
                        <span style="font-size:13px;line-height:1.69;font-stretch: normal;" v-if="question.content.length < 165">
                            {% verbatim %}
                            {{{ question.content }}}
                            {% endverbatim %}</span>
                        <span style="font-size:13px;line-height:1.69;font-stretch: normal;" v-else>
                            {% verbatim %}
                            {{{ question.content }}}
                            {% endverbatim %}</span>
                        <a v-on:click="question.reverl_all = !question.reverl_all" style="font-weight:bold;">收起</a>
                    </div>
                    <div class="description" v-else>
                        <span style="font-size:13px;line-height:1.69;font-stretch: normal;">
                            <!--{{ answer.content|slice:"250" }}-->
                            
                            {% verbatim %}
                            {{{ question.content | limitBy 145 }}}
                            {% endverbatim %}
                            ...  </span>
                        <a v-on:click="question.reverl_all = !question.reverl_all" style="font-weight:bold;">显示全部</a>
                    </div>
                    <div class="extra">
                        <i class="comment icon"></i>
                        <!--<span style="font-size:13px;">添加评论</span>-->
                        <a v-on:click="getComment(question.id)"><span style="font-size:13px;"  v-on:click="question.menu = !question.menu"><% question.comment_counts %>条评论</span></a>
                        <div class="ui divider" style="margin-top: 10px;margin-bottom: 10px;"></div>
                    </div>
                    <div v-if="question.menu" class="ex-comment">
                        <div class="ui segment" style="overflow:auto;margin-top:0;position:relative;">
                            <div class="ui comments">
                                <div class="comment" v-for="comment in comments">
                                    <a class="avatar">
                                    <img src="<% comment.author.avatar %>" alt="" style="height: 24px;width: 24px"/></a>
                                    <div class="content">
                                        <a class="author">
                                            <% comment.author.name %>
                                        </a>
                                        <div class="text">
                                            <% comment.content %>
                                        </div>
                                        <div class="actions">
                                            <span class="date" style="color: grey;"><% comment.createtime %></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui divider"></div>
                                <form class="ui reply form">
                                    <div class="ui input" style="width:100%;">
                                        <input type="text" v-model="comment_content">
                                    </div>
                                    {% if request.user.is_authenticated %}
                                    <div v-on:click="addComment(answer.id)" class="ui button" style="float: right;color:#fff;background-color:#3e78ad;margin-top:14px;">评论</div>
                                    <button class="ui button" style="float: right;background-color:#ffffff;margin-top:14px;">取消</button>                                    {% else %}
                                    <div class="ui button" style="float: right;background-color:#ffffff;margin-top:14px;"><a href="/login">评论前请先登录</a> </div>
                                    {% endif %}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui long button" style="margin-bottom: 30px;">
            <div class="header item">
                <a v-on:click="getNewData()">加载更多</a>
            </div>
        </div>
    </div>
    <div class="ui modal" id="modal">
        <div class="ui secondary menu q_head">
            <h3 class="header item">提问</h3>
            <div class="right menu">
                <div class="item" style="padding-left:80px">
                    <a href="javascript:$('.ui.modal').modal('hide')">
                        <img src="{% static 'images/close_icon.png' %}" alt="" />
                    </a>
                </div>
            </div>
        </div>
        <div class="ui basic segment">
            <form class="ui form q_content">
                <!-- 问题内容 -->
                <div class="ui fluid input">
                    <input type="text" name="title" value="" placeholder="写下你的问题" v-model="new_question_title">
                </div>
                <br>
                <!-- 问题说明 -->
                <textarea id="editor-trigger"></textarea>
                <div class="field">
                    <label for="" style="margin-bottom:10px;margin-top: 10px;">添加话题：</label>
                    <input type="text" name="topic" value="" placeholder="话题之间空格隔开" v-model="new_question_topic"> {% csrf_token
                    %}
                </div>
                <!-- 是否发布动作 -->
                <div class="actions">
                    <div class="ui right floated buttons">
                        <div class="ui basic button item" onclick="$('.ui.modal').modal('hide')">
                            取消
                        </div>
                        <button type="button" class="ui blue button item" v-on:click="addQuestion()">
                                发布
                            </button>
                    </div>
                </div>
            </form>
        </div>
    </div>



<div class="ui small modal" id='modal2'>
    <div class="header">
        麻瓜问答
    </div>
    <div class="content" style="text-align: center;">
        <p>提问前请登录</p>
    </div>
    <div class="actions">
        <div class="ui negative left button">
            不，谢谢
        </div>
        <a href="/login">
            <div class="ui positive right button">
                登录
            </div>
        </a>
    </div>
  </div>

    <script type="text/javascript" src="{% static 'wangEditor-2.1.22\dist\js\wangEditor.js' %}"></script>
    <script>
        Vue.config.delimiters = ['<%', '%>'];
        var vm = new Vue({
            el: "#app",
            data: {
                questions: [],
                number: 5,
                comments: [],
                editorContent: '',

            },
            methods: {
                getDate: function () {
                    var self = this;
                    reqwest({
                        url: '/api/home_api/' + self.number,
                        type: 'json',
                        method: 'get',
                        headers: Cookies.get('token') ? {
                            'Authorization': 'Token ' + Cookies.get('token')
                        } : {},
                        success: function (resp) {
                            for (var i = 0; i < resp.length; i++) {
                                resp[i]['menu'] = false;

                                if (resp[i].content.length <= 150) {
                                    resp[i]['reverl_all'] = true;
                                } else {
                                    resp[i]['reverl_all'] = false;
                                }
                            }
                            self.questions = resp;
                            console.log(resp);
                        }
                    })
                },
                getNewData: function () {
                    this.number += 5;
                    this.getDate();
                },
                getComment: function (answer_id) {
                    var self = this;
                    reqwest({
                        url: '/api/comment/' + answer_id,
                        type: 'json',
                        method: 'get',
                        headers: Cookies.get('token') ? {
                            'Authorization': 'Token ' + Cookies.get('token')
                        } : {},
                        success: function (resp) {
                            console.log(resp)
                            self.comments = resp
                        }
                    })
                },
                addComment: function (answer_id) {
                    var self = this;
                    reqwest({
                        url: '/api/new_comment_api',
                        type: 'json',
                        method: 'post',
                        headers: Cookies.get('token') ? {
                            'Authorization': 'Token ' + Cookies.get('token')
                        } : {},
                        data: {
                            content: self.comment_content,
                            answer_id: answer_id,
                        },
                        success: function (resp) {
                            console.log(resp);
                            self.getComment(answer_id);
                            self.getDate();
                        }
                    })
                },
                addQuestion: function () {
                    var self = this;
                    reqwest({
                        url: '/api/addquestion/',
                        type: 'json',
                        method: 'post',
                        headers: Cookies.get('token') ? {
                            'Authorization': 'Token ' + Cookies.get('token')
                        } : {},
                        data: {
                            title: self.new_question_title,
                            desc: self.editorContent,
                            topic: self.new_question_topic,
                        },
                        success: function (resp) {
                            console.log(resp);
                        },
                    })
                },
                Show: function () {
                    $('#modal2 > .content > p').text('点赞前请先登录')
                    $('#modal2').modal('show')
                }
            },

            ready: function () {
                this.getDate()
                //以下为加载富文本编辑器的代码
                var self = this;
                var editor = new wangEditor('editor-trigger');
                editor.onchange = function () {
                    self.editorContent = editor.$txt.html();
                };
                editor.config.menus = [ //配置显示的菜单
                    'bold',
                    'underline',
                    'italic',
                    'strikethrough',
                    'forecolor',
                    '|',
                    'unorderlist',
                    'orderlist',
                    'img',
                    '|', // '|' 是菜单组的分割线
                    'quote',
                    'insertcode',
                    'fullscreen',
                ];
                editor.create()
                //以上为加载富文本编辑器的代码
            }
        })
    </script>
</body>

</html>